import React, { useState } from 'react';
import { 
  Card, 
  Row, 
  Col, 
  Select, 
  // Statistic,
  // Table
} from 'antd';
import { 
  Area,
  AreaChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer
} from 'recharts';

const { Option } = Select;

const Data: React.FC = () => {
  const [chartType, setChartType] = useState('all');

  // 模拟本月数据
  const monthlyData = {
    self: {
      salesVolume: 1250,
      salesAmount: 156800,
      profit: 42350
    },
    consignment: {
      salesVolume: 890,
      salesAmount: 98700,
      profit: 23400
    },
    team: {
      gold: {
        people: 15,
        sales: 45600
      },
      silver: {
        people: 28,
        sales: 23400
      }
    }
  };

  // 模拟图表数据
  const chartData = [
    { month: '1月', sales: 80, profit: 40 },
    { month: '2月', sales: 120, profit: 60 },
    { month: '3月', sales: 150, profit: 75 },
    { month: '4月', sales: 100, profit: 50 },
    { month: '5月', sales: 200, profit: 100 },
  ];

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card style={{ borderRadius: '8px' }}>
        <Row gutter={24}>
                     {/* 本月数据卡片 */}
           <Col span={16}>
                           <Card style={{ borderRadius: '8px' }}>
                <div style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '24px', textAlign: 'center' }}>
                  本月数据
                </div>
                
                                 <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                   {/* 表头 */}
                   <div style={{ display: 'flex', borderBottom: '1px solid #f0f0f0', paddingBottom: '8px' }}>
                     <div style={{ flex: 1, fontSize: '14px', fontWeight: 'bold', color: '#333' }}></div>
                     <div style={{ flex: 1, fontSize: '14px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>自营</div>
                     <div style={{ flex: 1, fontSize: '14px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>代售</div>
                   </div>
                   
                   {/* 数据行 */}
                   <div style={{ display: 'flex', alignItems: 'center', padding: '8px 0' }}>
                     <div style={{ flex: 1, fontSize: '12px', color: '#666' }}>销售量</div>
                     <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>{monthlyData.self.salesVolume}</div>
                     <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>{monthlyData.consignment.salesVolume}</div>
                   </div>
                   
                   <div style={{ display: 'flex', alignItems: 'center', padding: '8px 0' }}>
                     <div style={{ flex: 1, fontSize: '12px', color: '#666' }}>销售额</div>
                     <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>¥{monthlyData.self.salesAmount.toLocaleString()}</div>
                     <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>¥{monthlyData.consignment.salesAmount.toLocaleString()}</div>
                   </div>
                   
                   <div style={{ display: 'flex', alignItems: 'center', padding: '8px 0' }}>
                     <div style={{ flex: 1, fontSize: '12px', color: '#666' }}>利润</div>
                     <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>¥{monthlyData.self.profit.toLocaleString()}</div>
                     <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>¥{monthlyData.consignment.profit.toLocaleString()}</div>
                   </div>
                 </div>
              </Card>
           </Col>

                     {/* 代售团队卡片 */}
           <Col span={8}>
             <Card style={{ borderRadius: '8px', height: '100%' }}>
                               <div style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '24px', textAlign: 'center' }}>
                  代售团队
                </div>
                               <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                  {/* 表头 */}
                  <div style={{ display: 'flex', borderBottom: '1px solid #f0f0f0', paddingBottom: '8px' }}>
                    <div style={{ flex: 1, fontSize: '14px', fontWeight: 'bold', color: '#333' }}></div>
                    <div style={{ flex: 1, fontSize: '14px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>人数</div>
                    <div style={{ flex: 1, fontSize: '14px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>销售额</div>
                  </div>
                  
                  {/* 数据行 */}
                  <div style={{ display: 'flex', alignItems: 'center', padding: '8px 0' }}>
                    <div style={{ flex: 1, fontSize: '12px', color: '#666' }}>金牌</div>
                    <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>{monthlyData.team.gold.people}</div>
                    <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>¥{monthlyData.team.gold.sales.toLocaleString()}</div>
                  </div>
                  
                  <div style={{ display: 'flex', alignItems: 'center', padding: '8px 0' }}>
                    <div style={{ flex: 1, fontSize: '12px', color: '#666' }}>银牌</div>
                    <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>{monthlyData.team.silver.people}</div>
                    <div style={{ flex: 1, fontSize: '16px', fontWeight: 'bold', color: '#333', textAlign: 'center' }}>¥{monthlyData.team.silver.sales.toLocaleString()}</div>
                  </div>
                </div>
             </Card>
           </Col>
        </Row>

        {/* 月度数据卡片 */}
        <Card style={{ borderRadius: '8px', marginTop: '24px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
            <div style={{ fontSize: '16px', fontWeight: 'bold' }}>
              月度数据
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
              <Select 
                value={chartType} 
                onChange={setChartType}
                style={{ width: '120px' }}
              >
                <Option value="all">全部</Option>
                <Option value="self">自营</Option>
                <Option value="consignment">代售</Option>
              </Select>
              <span style={{ fontSize: '14px', color: '#333' }}>销售量/利润</span>
            </div>
          </div>

          {/* 图表区域 */}
          <div style={{ height: '300px' }}>
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={chartData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis 
                  dataKey="month" 
                  axisLine={false}
                  tickLine={false}
                  tick={{ fontSize: 12, color: '#666' }}
                />
                <YAxis 
                  axisLine={false}
                  tickLine={false}
                  tick={{ fontSize: 12, color: '#666' }}
                  domain={[0, 200]}
                  ticks={[0, 100, 150, 200]}
                />
                <Tooltip 
                  contentStyle={{ 
                    backgroundColor: '#fff', 
                    border: '1px solid #d9d9d9',
                    borderRadius: '6px'
                  }}
                />
                <Area 
                  type="monotone" 
                  dataKey="sales" 
                  stackId="1"
                  stroke="#52c41a" 
                  fill="#52c41a" 
                  fillOpacity={0.3}
                />
                <Area 
                  type="monotone" 
                  dataKey="profit" 
                  stackId="1"
                  stroke="#1890ff" 
                  fill="#1890ff" 
                  fillOpacity={0.3}
                />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </Card>
      </Card>
    </div>
  );
};

export default Data; 